<template>
  <ul class="kindlist">
    <li class="proItem"  @click= "goDetail(item)" v-for="item of kindlist" :key = "item.id">
      <div class="proInfo">
        <p>{{ item.title }}</p>
        <div class="profoot">
          <span class="iconfont icon-shoucang1"> {{111}} </span>
          <span class="iconfont icon-comment"> {{111}} </span>
        </div>
      </div>
      <div class="proImg">
        <img v-lazy="item.images.small" alt="">
        <span class="hot">HOT</span>
      </div>
    </li>
  </ul>
</template>

<script>
import Vue from 'vue'
import { Lazyload } from 'mint-ui'
Vue.use(Lazyload)
export default {
  props: ['kindlist'],
  methods: {
    goDetail (item) {
      this.$router.push(`/kind-detail/${item.id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';

.kindlist {
  @include rect(100%, auto);

  .proItem {
    @include rect(100%, 1rem);
    @include flexbox();
    @include border(0 0 0.02rem 0, #ccc, solid);
    .proImg {
      @include rect(1.5rem, 1rem);
      position: relative;
      img {
        @include rect(1.4rem, 0.9rem);
        @include margin(0.05rem 0.05rem 0.05rem 0.05rem);
      }
      .hot {
        @include rect(0.35rem, 0.2rem);
        @include background-color(#fa2a83);
        color: #fff;
        position: absolute;
        top: 0.05rem;
        right: 0.05rem;
        text-align: center;
      }
    }
    .proInfo {
      @include flex();
      @include margin(0.1rem 0.1rem 0.1rem 0.1rem);
      p {
        @include rect(100%, 70%);
        line-height: 0.3rem;
        text-align: left;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;/** 隐藏超出的内容 **/
        display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 2; /** 显示的行数 **/
      }
    }
  }
}
image[lazy=loading] {
  width: 0.6rem;
  height: 0.4rem;
  margin: auto;
}
.profoot {
  @include rect(100%, 30%);
}
.icon-comment, .icon-shoucang1{
  font-size: 0.16rem
}
</style>
